<template>
	<view>
		<view class="contentCla">
			<view class="boxCla">
				<view class="titleCla">
					<view class="titleNameCla">
						{{guanjianciData.titleName}}
					</view>
					<view class="numCla">
						{{selectNum+'/9'}}
					</view>
				</view>
				<view class="textCla">
					{{guanjianciData.Content}}
				</view>
				<view class="recommendedCla" v-if="wordArr.length > 0">
					推荐关键词
				</view>
				<view class="recommendedBoxCla">
					<view class="recommendedItemCla" :class="{'recommendedItemCla1':item.IsChecked == true}"
						v-for="(item,index) in wordArr" :key="index" @click="recommendedItemClick(item)">
						<text>{{item.FullName}}</text>
					</view>
				</view>
				<view class="customCla">
					自定义关键词
				</view>
				<view class="customBoxCla">
					<view class="itemCla" v-for="(item,index) in customList" :key="index">
						<view class="customBoxItemCla" @click="customItemClick(item)"
							:class="{'customBoxItemCla1':item.IsChecked == false}">
							<text>{{item.FullName}}</text>
						</view>
						<u-icon class="iconCla" name="close-circle-fill" color="#000000 " size="19"
							@click="iconClick(item)"></u-icon>

					</view>
					<view class="customkeywordCla" @click="customkeywordClick">
						定义关键词
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="添加关键词" showCancelButton @confirm="confirmClick" @cancel="cancelClick">
			<u--input placeholder="请输入关键词,不超过20个字" border='none' maxlength="20" v-model="value"></u--input>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				name: '',
				value: '',
				customList: [],
				wordArr: [],
				sunArr:[],
				PositionId: null,
				tuijianIndex: '',
			}
		},
		props: {
			guanjianciData:{
				type: Object
			},
			guanjianciShow:{
				type: Boolean,
				dafault: false
			},
			
		},
		created() {
			this.jobLabelList();
		},
		watch:{
			guanjianciShow(newVal){
				if(newVal){
					this.chuanshuMet()
				}
			},
		},
		computed: {
			// 选中的数量
			selectNum() {
				this.sunArr = [...this.customList, ...this.wordArr];
				let sum = 0;
				this.sunArr.forEach(item => {
					if (item.IsChecked) {
						sum += 1
					}
				})
				return sum
			}
		},
		methods: {
			
			huixianguanjianci(val){
				if(val.Tags.length > 0){
					let arr = [];
					let arr1 = []
					this.wordArr.forEach(item => {
						val.Tags.forEach(item1 => {
							if(item.FullName == item1.FullName){
								arr.push(item1)
							}
							
						})
					})
					arr1 = val.Tags.filter(item => {
						return !arr.some((val) => {
							return val.FullName == item.FullName
						})
					})
					this.wordArr = arr;
					this.customList = arr1;
				}
			},
			
			chuanshuMet(){
				this.sunArr = [...this.customList, ...this.wordArr];
				// this.sunArr = this.sunArr.filter(item => item.IsChecked);
				this.$emit('toguanjianciData',this.sunArr)
			},
			
			//确认
			confirmClick() {
				if(this.value.replaceAll(" ","").length==0){
					this.$util.toast("关键词不能为空格，不能为空！");
				}else{
					let obj = {
						FullName: this.value,
						IsChecked: true,
					}
					this.customList.unshift(obj)
					this.show = false;
					this.value = '';
				}
			},
			//取消
			cancelClick() {
				this.show = false;
			},
			// 定义关键词点击事件
			customkeywordClick() {
				if (this.selectNum >= 9) {
					this.$util.toast("选择的职位关键词不能超过9个！");
				} else {
					this.show = true;
				}
			},
			//删除图标
			iconClick(item1) {
				this.customList = this.customList.filter(item => item != item1)
			},
			//职位关键词
			jobLabelList() {
				this.$http.huirc.jobLabelList({
					Id: Number(this.guanjianciData.PositionId),
				}).then((res) => {
					let arr = res.Result
					arr.forEach((item) => {
						let obj = {
							FullName: item.FullName,
							IsChecked: false,
						}
						this.wordArr.push(obj);
					});
					this.huixianguanjianci(this.guanjianciData)
				});
			},
			
			// 推荐关键词点击事件
			recommendedItemClick(item) {
				if (this.selectNum >= 9) {
					if (item.IsChecked) {
						item.IsChecked = !item.IsChecked;
					} else {
						this.$util.toast("选择的职位关键词不能超过9个！");
					}
				} else {
					item.IsChecked = !item.IsChecked;
				}
			},
			// 自定义关键词点击事假
			customItemClick(item) {
				if (this.selectNum >= 9) {
					if (item.IsChecked) {
						item.IsChecked = !item.IsChecked;
					} else {
						this.$util.toast("选择的职位关键词不能超过9个！");
					}
				} else {
					item.IsChecked = !item.IsChecked;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.contentCla {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.boxCla {
			padding: 0 40rpx;

			.titleCla {
				width: 100%;
				padding-top: 60rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #000000;
				display: flex;
				justify-content: space-between;

				.titleNameCla {
					width: 85%;
				}

				.numCla {}
			}

			.textCla {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}

			.recommendedCla {
				margin: 83rpx 0 20rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #000000;
			}

			.recommendedBoxCla {
				display: flex;
				flex-wrap: wrap;

				.recommendedItemCla {
					width: 30%;
					height: 76rpx;
					background: #F7F8FA;
					border-radius: 6rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;

					text {
						width: 90%;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.recommendedItemCla1 {
					width: 30%;
					height: 76rpx;
					background: #F1F8FF;
					border-radius: 6rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #3476FE;
					border: 2rpx solid #3476FE;

					text {
						width: 90%;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.recommendedItemCla:not(:nth-child(3n)) {
					margin-right: calc(13%/3);
				}
			}

			.customCla {
				margin: 40rpx 0 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.customBoxCla {
				display: flex;
				flex-wrap: wrap;

				.itemCla {
					width: 30%;
					position: relative;

					.customBoxItemCla {
						width: 100%;
						height: 76rpx;
						background: #F1F8FF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						opacity: 1;
						border: 2rpx solid #3476FE;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #3476FE;

						margin-bottom: 20rpx;

						text {
							width: 90%;
							text-align: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.customBoxItemCla1 {
						width: 100%;
						height: 76rpx;
						background: #F7F8FA;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						opacity: 1;
						border: 2rpx solid #F7F8FA;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-bottom: 20rpx;

						text {
							width: 90%;
							text-align: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.iconCla {
						position: absolute;
						bottom: 80%;
						left: 90%;
					}
				}

				.itemCla:not(:nth-child(3n)) {
					margin-right: calc(13%/3);
				}

				.customkeywordCla {
					width: 30%;
					height: 76rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					opacity: 1;
					border: 2rpx solid #3476FE;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #3476FE;
					font-size: 26rpx;
				}

			}


		}

	}
</style>